<template>
  <div ref="chart2" class="countbox"></div>
</template>
<script>
import ResizeChart from "@/components/mixin/ResizeChart";
export default {
  data() {
    return {
      myChart: null,
      option: {
          "color": [
        "#516b91",
        "#59c4e6",
        "#edafda",
        "#93b7e3",
        "#a5e7f0",
        "#cbb0e3"
    ],
        tooltip: {
          trigger: "item",
        },
        title: {
          text: "村庄规划编制类别百分比",
          left: "center",
        },
        legend: {
          orient: "vertical",
          left: "right",
        },
        series: [
          {
            // name: "村庄规划编制类别百分比",
            type: "pie",
            radius: '50%',
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            labelLine: {
              show: false,
            },
            data: [
              // { value: 1048, name: "提升完善类" },
              // { value: 735, name: "详规统筹类" },
              // { value: 580, name: "合并编制类" },
              // { value: 484, name: "单独编制类" },
              // { value: 300, name: "镇村一体类" },
            ],
          },
        ],
      },
    };
  },
  mounted() {},
  mixins: [ResizeChart],
  methods: {
    initEchartMap() {
      this.myChart = this.$echarts.init(this.$refs.chart2);
      window.addEventListener("resize", this.myChart.resize);
      this.myChart.setOption(this.option);
    },
    changeMap(data) {
      this.option.series[0].data = data;
      this.myChart.setOption(this.option);
      this.myChart.hideLoading();
    },
  },
};
</script>
<style lang="scss" scoped>
.countbox {
  margin: 10px;
  width: 100%;
  height: 100%;
  border-radius: 5px;
   padding-right: 20px;
  position: relative;
}
</style>